import React, { useEffect, useRef, useState } from "react";
import lessModule from "./index.module.less"
import { Button, DatePicker, Empty, InputNumber, message, Modal, Radio, RadioChangeEvent, Select, Space, Table, Upload } from "antd";
import Dragger from "antd/es/upload/Dragger";
import emptyImage from "../../../../assets/image/homePageReasoningPage-tableEmpty.png"
import featherImage from "../../../../assets/image/homePageParamsSettingPage-modalFeather.png"
import infoImage from "../../../../assets/image/homePageParamsSettingPage-modalInfo.png"
import { $labelDictInterface } from "../../../../common/type";
import { $Http } from "../../../../network";
import HomePage_ChartScatterComponent from "../../component/chartScatter";
import { use } from "echarts";


// 主页-滚动监测页面
const HomePage_ParamsSettingPage = () => {
    // 错误字典
    const [errDict, setErrDict] = useState<{ [key: string]: boolean }>({});
    // 模型列表
    const [modelList, setModelList] = useState<Array<$labelDictInterface>>([]);
    // 模型名称
    const [modelName, setModelName] = useState<string | null>(null);
    // 概率阈值
    const [threshold, setThreshold] = useState<number | null>(null);
    // 功率参考
    const [powerRef, setPowerRef] = useState<number | null>(null);
    // 风速参考
    const [windRef, setWindRef] = useState<number | null>(null);
    /**
     * @brief 获取推理模型
     * @param 
     * @return 
     * @note 
     * @warning 
     */
    const http_inference = () => {
        $Http("inference", {}).then((res: object) => {
            setModelList([...res["model_list"]])
        })
    }


    /**
     * @brief 监听模型名称
     * @param value: string 选中的模型名称
     * @return 
     * @note 
     * @warning 
     */
    const change_modelName = (value: string) => {
        errDict.baseModel = !value
        setModelName(value);
        setErrDict({ ...errDict });

    }
    /**
     * @brief 监听概率阈值
     * @param value: number 输入的概率阈值
     * @return 
     * @note 
     * @warning 
     */
    const change_threshold = (event: number | null) => {
        errDict.threshold = event === null
        setThreshold(event)
        setErrDict({ ...errDict });
    }

    /**
     * @brief 监听功率参考
     * @param event: any 输入事件对象
     * @return 
     * @note 
     * @warning 
     */
    const change_powerRef = (event: number | null) => {
        errDict.powerRef = event === null
        setPowerRef(event)
        setErrDict({ ...errDict });
    }
    /**
     * @brief 监听风速参考
     * @param event: any 输入事件对象
     * @return 
     * @note 
     * @warning 
     */
    const change_windRef = (event: number | null) => {
        errDict.windRef = event === null
        setWindRef(event)
        setErrDict({ ...errDict });
    }

    /**
     * @brief 查询配置请求
     * @param 
     * @return 
     * @note 
     * @warning 
     */
    const http_searchConfig = () => {
        $Http("searchConfig", {}, "post").then((res) => {
            setModelName(res["model_name"]);
            setThreshold(res["threshold"] ?? null);
            setPowerRef(res["power_ref"] ?? null);
            setWindRef(res["wind_ref"] ?? null);
        })
    }

    const click_submit = () => {
        errDict.modelName = !modelName
        errDict.threshold = threshold === null
        errDict.powerRef = powerRef === null
        errDict.windRef = windRef === null
        setErrDict({ ...errDict });
        !Object.values(errDict).filter((item: boolean) => item).length && http_editConfig()
    }
    /**
     * @brief 编辑配置请求
     * @param 
     * @return 
     * @note 
     * @warning 
     */
    const http_editConfig = () => {
        $Http("editConfig", {
            model_name: modelName,
            power_ref: powerRef,
            threshold,
            wind_ref: windRef,
        }, "post").then((res) => {
            message.success("保存成功!")
        })
    }

    useEffect(() => {
        http_inference()
        http_searchConfig()
    }, [])

    return (
        <div className={lessModule["homePageParamsSettingPage"]} >
            <div className={lessModule["homePageParamsSettingPage-row"]}>
                <span className={lessModule["homePageParamsSettingPage-row__label"]}>选择模型：</span>
                <Select placeholder="请选择" value={modelName} options={modelList} fieldNames={{ value: "label" }} onChange={change_modelName} />
            </div>
            {
                errDict.modelName && <div className={`${lessModule["homePageParamsSettingPage-row"]} ${lessModule["homePageParamsSettingPage-errRow"]}`}>请选择</div>
            }
            <div className={lessModule["homePageParamsSettingPage-row"]}>
                <span className={lessModule["homePageParamsSettingPage-row__label"]}>概率阈值：</span>
                <InputNumber placeholder="请输入" value={threshold} min={0} onChange={change_threshold} />
            </div>
            {
                errDict.threshold && <div className={`${lessModule["homePageParamsSettingPage-row"]} ${lessModule["homePageParamsSettingPage-errRow"]}`}>请输入</div>
            }
            <div className={lessModule["homePageParamsSettingPage-row"]}>
                <span className={lessModule["homePageParamsSettingPage-row__label"]}>额定功率(kW)：</span>
                <InputNumber placeholder="请输入" value={powerRef} min={0} onChange={change_powerRef} />
            </div>
            {
                errDict.powerRef && <div className={`${lessModule["homePageParamsSettingPage-row"]} ${lessModule["homePageParamsSettingPage-errRow"]}`}>请输入</div>
            }
            <div className={lessModule["homePageParamsSettingPage-row"]}>
                <span className={lessModule["homePageParamsSettingPage-row__label"]}>参考风速(m/s)：</span>
                <InputNumber placeholder="请输入" value={windRef} min={0} onChange={change_windRef} />
            </div>
            {
                errDict.windRef && <div className={`${lessModule["homePageParamsSettingPage-row"]} ${lessModule["homePageParamsSettingPage-errRow"]}`}>请输入</div>
            }
            <footer className={lessModule["homePageParamsSettingPage-footer"]}>
                <Button className={lessModule["homePageParamsSettingPage-footer__btn"]} type="primary" onClick={click_submit}>保存</Button>
            </footer>
        </div>
    )

}

export default HomePage_ParamsSettingPage